<template>
  <div class="information">
    <div class="header">
      <!-- 资讯模块 -->
      <div>
        <div>
          <el-form
            @submit.native.prevent
            :inline="true"
            class="demo-form-inline"
          >
            <el-form-item label="关键字">
              <el-input
                @keyup.native.enter="submit"
                v-model="title"
                placeholder="请输入关键字"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="block">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 资讯列表 -->
    <el-card class="box-card">
      <ul>
        <li
          v-for="item in consultationData.result"
          :key="item.consultation_id"
          @click="detail(item.consultation_id)"
        >
          <p>{{ item.consultation_title }}</p>
          <span
            ><i>{{ item.username }}</i
            >{{
              $moment(item.consultation_data).format("YYYY-MM-DD HH:mm:ss")
            }}
            <el-button size="small" @click.stop="$router.push('/home/information-update/' + item.consultation_id)">修改</el-button>
            <el-button type="danger" size="small" @click.stop="del(item.consultation_id)">删除</el-button>
            </span
          >
        </li>
      </ul>
    </el-card>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <div v-html="detailinfo.consultation_text"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-pagination
      style="margin: 10px"
      background
      :total="consultationData.total"
      :page-size="consultationData.pagesize"
      :current-page="consultationData.page"
      layout="->, total, prev, pager, next, jumper"
      @current-change="changeCurrentPage"
    ></el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      detailinfo: {},
      dialogVisible: false,
      type: [],
      title: "",
      date: [],
      consultationData: {
        page: 1,
        pagesize: 5,
        total: 0,
        result: [],
      },
    };
  },
  methods: {
    // 提交
    submit() {
      console.log(this.date);
      this.consultationData.page = 1;
      this.search();
    },
    // 点击列表查看详情
    detail(id) {
      httpApi.consultationApi.queryId({ consultation_id: id }).then((res) => {
        if (res.data.code == 200) {
          this.detailinfo = res.data.data.result[0];
          this.dialogVisible = true;
        } else {
          this.$message.error("系统错误请稍后再试");
        }
      });
    },
    // 初始化资讯列表
    infoConsultation() {
      let params = {
        page: this.consultationData.page,
        pagesize: this.consultationData.pagesize,
      };
      httpApi.consultationApi.queryall(params).then((res) => {
        console.log("加载资讯列表", res);
        this.consultationData.result = res.data.data.result;
        this.consultationData.total = res.data.data.total;
      });
    },
    changeCurrentPage(page) {
      this.consultationData.page = page; // 修改当前页
      this.search();
    },
    search() {
      let startdate = "";
      let enddate = "";
      // console.log(this.date?111:222);
      if (this.date.length > 0) {
        startdate = this.$moment(this.date[0]).format("YYYY-MM-DD HH:mm:ss");
        enddate = this.$moment(this.date[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      let params = {
        page: this.consultationData.page,
        pagesize: this.consultationData.pagesize,
        title: this.title,
        startdate,
        enddate,
      };
      httpApi.consultationApi.query(params).then((res) => {
        console.log("加载资讯列表", res);
        this.consultationData.result = res.data.data.result;
        this.consultationData.total = res.data.data.total;
      });
    },
    // 删除资讯
    del(id){
      this.$confirm("是否删除该资讯信息", "提示", {
        ConfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        httpApi.consultationApi.del({ consultation_id: id }).then((res) => {
          this.search();
          this.$message.success("删除成功");
        });
      });
    }
    
  },
  mounted() {
    this.infoConsultation();
  },
};
</script>

<style lang="scss" scoped>
.information {
  padding: 0 30px;
}
.header {
  display: flex;
  justify-content: space-between;
}
.box-card {
  ul {
    li {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #333;
      cursor: pointer;
      p {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        font-size: 14px;
        width: 400px;
        text-align: right;
        i {
          font-size: 12px;
          margin-right: 20px;
          font-style: normal;
        }
      }
      &:active {
        background-color: #ddd;
      }
    }
  }
}
</style>
